<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" id="buttongroup-home" data-show="mobileSalesViewInit" data-title="Sales Report">
    <div class="head">&nbsp;</div>
    <ul id="select-period" data-index="0">
        <li>
            Month
        </li>
        <li>
            Quarter
        </li>
        <li>
            Year
        </li>
    </ul>
    <ul data-role="listview" data-style="inset">
        <li>January <span class="sales-up">&uarr; $ 35,000</span></li>
        <li>February <span class="sales-down">&darr; $ 25,000</span></li>
        <li>March <span class="sales-down">&darr; $ 23,000</span></li>
        <li>April <span class="sales-up">&uarr; $ 30,000</span></li>
        <li>May <span class="sales-up">&uarr; $ 31,000</span></li>
        <li>June <span class="sales-down">&darr; $ 29,000</span></li>
        <li>July <span class="sales-up">&uarr; $ 35,000</span></li>
        <li>August <span class="sales-up">&uarr; $ 37,000</span></li>
        <li>September <span class="sales-hold">&rarr; $ 37,000</span></li>
        <li>October <span class="sales-hold">&rarr; $ 37,000</span></li>
        <li>November <span class="sales-up">&uarr; $ 38,000</span></li>
        <li>December <span class="sales-up">&uarr; $ 40,000</span></li>
    </ul>
    <ul data-role="listview" data-style="inset" style="display:none">
        <li>1st Quarter <span class="sales-up">&uarr; $ 83,000</span></li>
        <li>2nd Quarter <span class="sales-up">&uarr; $ 90,000</span></li>
        <li>3rd Quarter <span class="sales-up">&uarr; $ 109,000</span></li>
        <li>4th Quarter <span class="sales-up">&uarr; $ 115,000</span></li>
    </ul>
    <ul data-role="listview" data-style="inset" style="display:none">
        <li>2009 <span class="sales-up">&uarr; $ 120,000</span></li>
        <li>2010 <span class="sales-down">&darr; $ 109,000</span></li>
        <li>2011 <span class="sales-hold">&rarr; $ 109,000</span></li>
    </ul>
</div>


<script>
    function mobileSalesViewInit() {
        var listviews = this.element.find("ul.km-listview");

        $("#select-period").kendoMobileButtonGroup({
            select: function() {
                listviews.hide()
                         .eq(this.selectedIndex)
                         .show();
            },
            index: 0
        });
    }
</script>

<style scoped>
#buttongroup-home .head {
	display: block;
    margin: 1em;
	height: 110px;
	background: url(../../content/mobile/shared/sales.jpg) no-repeat center center;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
.km-ios .head,
.km-blackberry .head {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#select-period {
    margin: 1em auto .4em auto;
}
#buttongroup-home .km-list span {
	float: right;
}
#buttongroup-home .sales-up {
	color: green;
}
#buttongroup-home .sales-down {
	color: red;
}
#buttongroup-home .sales-hold {
	color: blue;
}
</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
